<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-Note</title>
    <style>
        /* 使用style标签，格式 标签｛属性：值；属性：值｝ */
        /* 基础选择器  */
        p {
            color: brown;
            font-size: 12px;
        }

        /* 类选择器 .类名｛属性：值｝
            类名的命名规范，通过短号连接，不能使用数字和中文
         */
        .green {
            background-color: green;
        }

        .red {
            /* width: 100px;
            height: 30px; */
            background-color: red;
        }

        span {
            width: 130px;
            height: 30px;
            background-color: red;
        }

        /* id选择器 
    id 只能是唯一的，与类不同，类可以对应对多个标签，
    如果使用多个标签使用同一个id，只有一个会生效
 */
        #pink {
            background-color: pink;
        }

        /* 通配常用才取消标签的默认属性 */
        * {
            color: white;
        }
    </style>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <p>记住CSS语法规范</p>
    <div>第一个div</div>
    <div class="green">第二个div</div>
    <span color="white">下面列表中，选择器类型的优先级是递增的：<br />
        类型选择器（例如，h1）和伪元素（例如，::before） <br>
        类选择器 (例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover）<br>
        ID 选择器（例如，#example）。</span>
    <p>段落标签</p>
    <ul>
        <li>第一个li</li>
    </ul>
    <ol>
        <li>第二个li</li>
    </ol>
    <div>
        要求：使用基础选择器和类选择器设置标签的颜色
    </div>
    <div class="red">
        <span width="40px" class="red">1</span>
        <span color="white">2</span>
        <span class="red">3</span>
        <span color="black">4444</span>
    </div>

    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
    <h4>通配符选择器</h4>
    <code id="pink">
    *｛
        color : red;
    ｝
    所有的标签统一修改样式
</code>
    <span style="width: 50px; height: 80px; background-color: yellowgreen;"> ceui </span>
</body>

</html>